/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="searchOrder.orderSn"
          placeholder="输入订单号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button> -->
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable prop="orderSn" label="订单编号" width="155">
      </el-table-column>
      <el-table-column sortable prop="username" label="微信昵称" width="100">
      </el-table-column>
      <el-table-column prop="goodsPrice" label="商品总价" width="70">
      </el-table-column>
      <el-table-column prop="actualPrice" label="实际付款" width="70">
      </el-table-column>
      <el-table-column sortable prop="address" label="送货地址" width="300">
      </el-table-column>
      <el-table-column sortable prop="orderTime" label="下单时间" width="150">
      </el-table-column>
      <el-table-column
        sortable
        prop="orderDetailStatus"
        label="订单状态"
        width="100"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="confirmOrderDiaLog(scope.$index, scope.row)"
            v-if="confirmOrderButton(scope.$index, scope.row)"
            >核实订单</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="cancelOrder(scope.$index, scope.row)"
            v-if="cancelOrderButton(scope.$index, scope.row)"
            >取消订单</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 订单详情界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      @click="closeDialog"
    >
      <el-container>
        <!-- 订单信息 -->
        <el-main class="detailTitle" style="margin-top: -50px">
          订单信息
        </el-main>
        <el-main style="border-bottom: 2px solid #f2f2f2; margin-top: -20px">
          <el-container>
            <el-aside width="33%">
              订单编号：{{ orderDetail.order.orderSn }}<br />
              实际付款：{{
                orderDetail.order.actualPrice == null
                  ? "暂未支付"
                  : orderDetail.order.actualPrice
              }}<br />
              快递公司：{{
                orderDetail.order.expressCompany == null
                  ? "暂未填写"
                  : orderDetail.order.expressCompany
              }}
            </el-aside>
            <el-aside width="33%">
              订单状态：{{
                orderDetail.order.orderStatus == 0
                  ? "未支付"
                  : orderDetail.order.orderStatus == 1
                  ? "已支付待发货"
                  : orderDetail.order.orderStatus == 2
                  ? "已支付已发货"
                  : orderDetail.order.orderStatus == 3
                  ? "用户取消"
                  : orderDetail.order.orderStatus == 4
                  ? "商家取消"
                  : orderDetail.order.orderStatus == 5
                  ? "部分商品退款或正在申请退款"
                  : orderDetail.order.orderStatus == 6
                  ? "已退款"
                  : "其它状态"
              }}<br />
              用户备注：{{ orderDetail.order.userRemark }}<br />
              快递编号：{{
                orderDetail.order.expressNum == null
                  ? "暂未填写"
                  : orderDetail.order.expressNum
              }}
            </el-aside>
            <el-aside width="33%">
              商品价格：{{ orderDetail.order.goodsPrice }}<br />
              商家备注：{{
                orderDetail.order.storeRemark == null
                  ? ""
                  : orderDetail.order.storeRemark
              }}<br />
            </el-aside>
          </el-container>
        </el-main>

        <!-- 用户信息 -->
        <el-main class="detailTitle"> 收件人信息 </el-main>
        <el-main style="border-bottom: 2px solid #f2f2f2; margin-top: -20px">
          <el-container>
            <el-aside width="33%">
              收件人：{{ orderDetail.userAddressDto.consignee }}<br />
              微信名：{{ orderDetail.userAddressDto.username }}
            </el-aside>
            <el-aside width="33%">
              联系电话：{{ orderDetail.userAddressDto.mobile }}<br />
              收件地址：{{ orderDetail.userAddressDto.address }}
            </el-aside>
          </el-container>
        </el-main>

        <!-- 商品信息 -->
        <el-main class="detailTitle"> 商品信息 </el-main>
        <el-main>
          <el-table
            border
            style="width: 100%; margin-top: -20px"
            :data="orderDetail.orderGoods"
          >
            <el-table-column label="子订单编号" width="200" prop="subOrderSn">
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName">
            </el-table-column>
            <el-table-column label="规格" prop="specifications">
            </el-table-column>
            <el-table-column label="购买单价" prop="price"> </el-table-column>
            <el-table-column label="数量" prop="num"> </el-table-column>
            <el-table-column label="退款状态" prop="refundStatus">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  v-if="handlerRefund(scope.$index, scope.row)"
                  @click="userRefundButton(scope.$index, scope.row)"
                  >退款处理</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  v-if="handlerShopRefund(scope.$index, scope.row)"
                  @click="cancelOrder(scope.$index, scope.row)"
                  >商家取消</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <!-- 订单日志信息 -->
        <el-main class="detailTitle"> 订单日志信息 </el-main>
        <el-main>
          <el-container>
            <el-table
              border
              style="width: 100%; margin-top: -20px"
              :data="orderDetail.orderLogList"
            >
              <el-table-column label="时间" width="160px" prop="logTime">
              </el-table-column>
              <el-table-column
                label="子订单号"
                width="200px"
                prop="orderGoodsId"
              >
              </el-table-column>
              <el-table-column label="消息" prop="message"> </el-table-column>
            </el-table>
          </el-container>
        </el-main>

        <!-- 底部 -->
        <el-footer
          style="
            border-top: 2px solid #f2f2f2;
            padding-top: 10px;
            text-align: center;
          "
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="confirmOrderDiaLog"
              v-if="confirmOrderButton()"
              >核实订单</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="cancelOrder(scope.$index, scope.row)"
              v-if="cancelOrderButton()"
              >取消订单</el-button
            >
            <el-button size="mini" @click="closeDialog">关闭</el-button>
          </template>
        </el-footer>
      </el-container>
    </el-dialog>

    <!-- 申请退款订单页面处理 -->
    <el-dialog
      title="退款订单申请处理"
      :visible.sync="checkedOrderRefundVisible"
      width="60%"
      @click="closeDialog"
    >
      是否同意退款该订单：【{{ refundSubOrder.subOrderSn }}】
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userRefund(false)">拒绝</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="userRefund(true)"
          >同意</el-button
        >
      </div>
    </el-dialog>

    <!-- 审核订单界面 -->
    <el-dialog
      :title="title"
      :visible.sync="checkedOrderVisible"
      width="60%"
      @click="closeDialog"
    >
      <el-form label-width="90px" :model="editForm" ref="editForm">
        <el-form-item label="实付金额" prop="actualPrice">
          <el-input
            size="small"
            auto-complete="off"
            placeholder="请输入实际付款的金额"
            v-model="editForm.actualPrice"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="expressCompany">
          <el-input
            size="small"
            auto-complete="off"
            placeholder="请输入派送的快递公司"
            v-model="editForm.expressCompany"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNum">
          <el-input
            size="small"
            auto-complete="off"
            placeholder="请输入派送的快递单号"
            v-model="editForm.expressNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家备注" prop="storeRemark">
          <el-input
            size="small"
            auto-complete="off"
            placeholder="请输入商家备注（此空可不填）"
            v-model="editForm.storeRemark"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm', '', true)"
          >发货</el-button
        >
        <el-button size="small" @click="submitForm('editForm', '', false)"
          >不通过</el-button
        >
        <el-button size="small" @click="closeConfirmOrderDialog"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {
  orderList,
  cancelOrder,
  orderDetail,
  applyRefundOrder,
  confirmOrder,
} from "../../api/orderMG";

export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      checkedOrderVisible: false, //审核订单页面显示
      checkedOrderRefundVisible: false, //子订单退款处理显示
      // 子订单退款申请处理数据
      refundSubOrder: {
        orderId: "",
        subOrderId: "",
        subOrderSn: "",
      },
      title: "添加",
      // 核实订单
      editForm: {
        orderId: 0,
        actualPrice: "",
        storeRemark: "",
        expressCompany: "",
        expressNum: "",
        confirmFlag: null,
      },

      formInline: {
        size: 1,
        current: 10,
      },
      searchOrder: {
        orderSn: "",
      },

      listData: [], //类目数据

      //订单详情数据
      orderDetail: {
        order: {
          actualPrice: 0,
          addressId: 0,
          createTime: "",
          expressCompany: "",
          expressNum: "",
          goodsPrice: 0,
          id: 0,
          orderSn: "",
          orderStatus: null,
          storeRemark: "",
          updateTime: "",
          userId: 0,
          userRemark: "",
        },
        orderGoods: [
          {
            goodsName: "",
            num: 0,
            picUrl: "",
            price: 0,
            productSn: "",
            specifications: "",
            subOrderId: "",
            subOrderSn: "",
          },
        ],
        orderLogList: [
          {
            logTime: null,
            message: "",
            orderGoodsId: "",
            orderId: "",
            orderStatus: 0,
            subOrderStatus: 0,
          },
        ],
        userAddressDto: {
          address: "",
          consignee: "",
          isDefault: 0,
          mobile: "",
          username: "",
        },
      },

      // 分页参数
      pageparm: {
        current: 1,
        size: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  /**
   * 创建完毕
   */
  created() {
    this.formInline.current = 1;
    this.formInline.size = 10;
    let data = {
      pageVo: this.formInline,
      orderSn: -1,
      //   orderStatus:0
    };
    // this.getdata(data)
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取订单列表
    async getdata(parameter) {
      let that = this;
      await orderList(parameter).then((res) => {
        if (res.code == "200") {
          that.loading = false;
          that.listData = res.data.records;
          that.pageparm.current = res.data.current;
          that.pageparm.size = res.data.size;
          that.pageparm.total = res.data.total;
        } else {
          // that.loading = true
          that.listData = [];
        }
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.current = parm.current;
      this.formInline.size = parm.size;
      let data = {
        pageVo: this.formInline,
        orderSn: this.searchOrder.orderSn,
      };
      this.getdata(data);
    },
    // 搜索事件
    search() {
      let formData = {
        pageVo: this.formInline,
        // orderStatus: 0,
        orderSn: this.searchOrder.orderSn,
      };
      this.getdata(formData);
    },

    // 取消订单
    async cancelOrder(index, row) {
      let orderId = this.orderDetail.order.id;
      let that = this;
      let flag = true;
      if (orderId == 0) {
        flag = false;
      }
      let orderCancelVo = {
        orderId: orderId == 0 ? row.id : orderId,
        subOrderId: typeof row == "undefined" ? null : row.subOrderId,
        refundRemark: "商家取消订单",
      };
      await cancelOrder(orderCancelVo).then((res) => {
        if (res.code == "200") {
          that.loading = false;
          let formData = {
            pageVo: this.formInline,
            orderSn: this.searchOrder.orderSn,
          };
          this.$message.success("取消订单成功！");
          this.getdata(formData);
          if (flag) {
            this.handleEdit(orderId);
          }
        } else {
          // that.loading = true
          this.$message.error("该订单不能取消！");
        }
      });
    },
    //显示订单详情界面
    handleEdit: function (index, row) {
      let orderId = 0;
      console.log(this.orderDetail);
      if (this.orderDetail.order.id == 0) {
        orderId = row.id;
      } else {
        orderId = this.orderDetail.order.id;
      }
      orderDetail(orderId)
        .then((res) => {
          if (res.code == 200) {
            this.orderDetail = res.data;
            // console.log( this.orderDetail)
            this.editFormVisible = true;
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("商品修改失败，请稍后再试！");
        });
    },

    // 退款处理按钮
    handlerRefund(index, row) {
      let order = this.orderDetail.order;
      // let refundStatus = this.orderList.orderGoods[index].refundStatus
      if (
        row.refundStatus == "申请退款中" &&
        (order.orderStatus == 0 ||
          order.orderStatus == 1 ||
          order.orderStatus == 2 ||
          order.orderStatus == 5)
      ) {
        return true;
      }
      return false;
    },

    // 商家取消按钮
    handlerShopRefund(index, row) {
      let orderDetail = this.orderDetail;
      let orderStatus = orderDetail.order.orderStatus;
      if (
        (orderStatus == 0 ||
          orderStatus == 1 ||
          orderStatus == 2 ||
          orderStatus == 5) &&
        row.refundStatus == "无"
      ) {
        return true;
      }
      return false;
    },

    // 申请退款处理
    userRefundButton(index, row) {
      this.checkedOrderRefundVisible = true;
      this.refundSubOrder = {
        orderId: this.orderDetail.order.id,
        subOrderId: row.subOrderId,
        subOrderSn: row.subOrderSn,
      };
    },

    userRefund(flag) {
      let that = this;
      let remark = "同意";
      if (!flag) {
        remark = "拒绝";
      }
      let orderApplyVo = {
        orderId: this.refundSubOrder.orderId,
        subOrderId: this.refundSubOrder.subOrderId,
        refundRemark: `商家${remark}退款该子订单：【${this.refundSubOrder.subOrderSn}】`,
        confirmFlag: flag,
      };
      applyRefundOrder(orderApplyVo).then((res) => {
        if (res.code == "200") {
          that.loading = false;
          let formData = {
            pageVo: this.formInline,
            orderSn: this.searchOrder.orderSn,
          };
          this.$message.success("取消订单成功！");
          this.getdata(formData);
        } else {
          // that.loading = true
          this.$message.error("该订单不能取消！");
        }
      });
      this.handleEdit(this.refundSubOrder.orderId);
      this.checkedOrderRefundVisible = false;
    },

    confirmOrderDiaLog(index, row) {
      this.checkedOrderVisible = true;
      this.editForm = {
        orderId:
          this.orderDetail.order.id == 0 ? row.id : this.orderDetail.order.id,
        actualPrice: "",
        storeRemark: "",
        expressCompany: "",
        expressNum: "",
        confirmFlag: null,
      };
    },
    // 编辑、增加页面保存方法
    submitForm(index, row, flag) {
      this.editForm.confirmFlag = flag;
      confirmOrder(this.editForm)
        .then((res) => {
          this.editFormVisible = false;
          this.loading = false;
          if (res.code == 200) {
            let formData = {
              pageVo: this.formInline,
              orderSn: this.searchOrder.orderSn,
            };
            this.getdata(formData);

            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("订单审核失败，请稍后再试！");
        });
      this.checkedOrderVisible = false;
    },

    confirmOrderButton(index, row) {
      let orderStatus = null;
      if (typeof row != "undefined") {
        orderStatus = row.orderStatus;
      } else {
        orderStatus = this.orderDetail.order.orderStatus;
        // this.editForm.orderId = row.id
      }

      if (orderStatus == 0) {
        return true;
      }
      return false;
    },

    cancelOrderButton(index, row) {
      let orderStatus = this.orderDetail.order.orderStatus;
      if (orderStatus == null) {
        orderStatus = row.orderStatus;
      }
      if (
        orderStatus == 0 ||
        orderStatus == 1 ||
        orderStatus == 2 ||
        orderStatus == 5
      ) {
        return true;
      }
      return false;
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    closeConfirmOrderDialog() {
      this.checkedOrderVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.detailTitle {
  font-weight: bolder;
  font-size: 20px;
  margin-top: -20px;
  padding-left: 5px;
  padding-top: 30px;
}
</style>

 